ഫ്രണ്ടെൻഡ് പെർഫോമൻസ് എപിഐ റിസോഴ്സ് ടൈമിംഗ് അഗ്രഗേഷൻ: ലോഡ് പെർഫോമൻസ് അനലിറ്റിക്സ്

അസാധാരണമായ ഉപയോക്തൃ അനുഭവങ്ങൾ നൽകുന്നതിനുള്ള ശ്രമത്തിൽ, ഫ്രണ്ടെൻഡ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. ഈ ഒപ്റ്റിമൈസേഷന്റെ ഒരു പ്രധാന വശം നിങ്ങളുടെ വെബ്സൈറ്റിലോ ആപ്ലിക്കേഷനിലോ വിഭവങ്ങൾ എങ്ങനെ ലോഡുചെയ്യുന്നുവെന്ന് മനസ്സിലാക്കുക എന്നതാണ്. വിശാലമായ പെർഫോമൻസ് എപിഐ സ്യൂട്ടിന്റെ ഭാഗമായ റിസോഴ്സ് ടൈമിംഗ് എപിഐ, ബ്രൗസർ ലഭ്യമാക്കുന്ന ഓരോ വിഭവത്തിന്റെയും സമയത്തെക്കുറിച്ചുള്ള വിശദമായ ഉൾക്കാഴ്ചകൾ നൽകുന്നു. തടസ്സങ്ങൾ തിരിച്ചറിയുന്നതിനും മൊത്തത്തിലുള്ള ലോഡ് പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനും ഈ വിവരങ്ങൾ വിലമതിക്കാനാവാത്തതാണ്. ഈ സമഗ്രമായ ഗൈഡ് റിസോഴ്സ് ടൈമിംഗ് എപിഐ എങ്ങനെ പ്രയോജനപ്പെടുത്താമെന്നും അതിന്റെ ഡാറ്റ സമാഹരിക്കാമെന്നും ലോഡ് പ്രകടന വിശകലനത്തിനായി അത് എങ്ങനെ ഉപയോഗിക്കാമെന്നും പര്യവേക്ഷണം ചെയ്യുന്നു.

റിസോഴ്സ് ടൈമിംഗ് എപിഐ മനസ്സിലാക്കൽ

ഒരു വെബ് പേജ് ലോഡ് ചെയ്യുന്ന ചിത്രങ്ങൾ, സ്ക്രിപ്റ്റുകൾ, സ്റ്റൈൽഷീറ്റുകൾ, മറ്റ് അസറ്റുകൾ എന്നിവ പോലുള്ള വിഭവങ്ങൾക്കായി റിസോഴ്സ് ടൈമിംഗ് എപിഐ വിശദമായ സമയ വിവരങ്ങൾ നൽകുന്നു. ഇതിൽ ഇനിപ്പറയുന്നതുപോലുള്ള മെട്രിക്കുകൾ ഉൾപ്പെടുന്നു:

• ഇനിഷ്യേറ്റർ ടൈപ്പ്: അഭ്യർത്ഥന ആരംഭിച്ച എലമെന്റിന്റെ തരം (ഉദാഹരണത്തിന്, 'img', 'script', 'link').
• പേര്: റിസോഴ്സിന്റെ URL.
• ആരംഭ സമയം: ബ്രൗസർ റിസോഴ്സ് ലഭ്യമാക്കാൻ തുടങ്ങുന്ന ടൈംസ്റ്റാമ്പ്.
• ഫെച്ച് സ്റ്റാർട്ട്: ഡിസ്ക് കാഷെയിൽ നിന്നോ നെറ്റ്‌വർക്കിൽ നിന്നോ ബ്രൗസർ റിസോഴ്സ് ലഭ്യമാക്കാൻ തുടങ്ങുന്നതിന് തൊട്ടുമുമ്പുള്ള ടൈംസ്റ്റാമ്പ്.
• ഡൊമെയ്ൻ ലുക്കപ്പ് സ്റ്റാർട്ട്/എൻഡ്: DNS ലുക്കപ്പ് പ്രക്രിയ ആരംഭിക്കുകയും അവസാനിക്കുകയും ചെയ്യുന്ന സമയത്തെ സൂചിപ്പിക്കുന്ന ടൈംസ്റ്റാമ്പുകൾ.
• കണക്റ്റ് സ്റ്റാർട്ട്/എൻഡ്: സെർവറിലേക്കുള്ള TCP കണക്ഷൻ ആരംഭിക്കുകയും അവസാനിക്കുകയും ചെയ്യുന്ന സമയത്തെ സൂചിപ്പിക്കുന്ന ടൈംസ്റ്റാമ്പുകൾ.
• റിക്വസ്റ്റ് സ്റ്റാർട്ട്/എൻഡ്: HTTP അഭ്യർത്ഥന ആരംഭിക്കുകയും അവസാനിക്കുകയും ചെയ്യുന്ന സമയത്തെ സൂചിപ്പിക്കുന്ന ടൈംസ്റ്റാമ്പുകൾ.
• റെസ്പോൺസ് സ്റ്റാർട്ട്/എൻഡ്: HTTP പ്രതികരണം ആരംഭിക്കുകയും അവസാനിക്കുകയും ചെയ്യുന്ന സമയത്തെ സൂചിപ്പിക്കുന്ന ടൈംസ്റ്റാമ്പുകൾ.
• ട്രാൻസ്ഫർ സൈസ്: കൈമാറ്റം ചെയ്യപ്പെട്ട റിസോഴ്സിന്റെ വലുപ്പം ബൈറ്റുകളിൽ.
• എൻകോഡ് ചെയ്ത ബോഡി സൈസ്: എൻകോഡ് ചെയ്ത (ഉദാഹരണത്തിന് GZIP കംപ്രസ്സ് ചെയ്ത) റിസോഴ്സ് ബോഡിയുടെ വലുപ്പം.
• ഡീകോഡ് ചെയ്ത ബോഡി സൈസ്: ഡീകോഡ് ചെയ്ത റിസോഴ്സ് ബോഡിയുടെ വലുപ്പം.
• സമയം: റിസോഴ്സ് ലഭ്യമാക്കാൻ എടുത്ത മൊത്തം സമയം (responseEnd - startTime).

ഈ മെട്രിക്കുകൾ ഡെവലപ്പർമാർക്ക് പ്രകടനം മെച്ചപ്പെടുത്താൻ കഴിയുന്ന നിർദ്ദിഷ്ട മേഖലകൾ കൃത്യമായി കണ്ടെത്താൻ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്, ദൈർഘ്യമേറിയ DNS ലുക്കപ്പ് സമയം വേഗതയേറിയ DNS ദാതാവിലേക്ക് മാറുന്നതിനോ അല്ലെങ്കിൽ ഒരു CDN ഉപയോഗിക്കുന്നതിനോ നിർദ്ദേശിച്ചേക്കാം. വേഗത കുറഞ്ഞ കണക്ഷൻ സമയം നെറ്റ്‌വർക്ക് തിരക്കോ സെർവർ-സൈഡ് പ്രശ്നങ്ങളോ സൂചിപ്പിക്കാം. വലിയ ട്രാൻസ്ഫർ വലുപ്പങ്ങൾ ഇമേജ് ഒപ്റ്റിമൈസേഷനോ കോഡ് മിനിഫിക്കേഷനോ ഉള്ള അവസരങ്ങൾ എടുത്തുകാണിച്ചേക്കാം.

റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ ആക്സസ് ചെയ്യൽ

ജാവാസ്ക്രിപ്റ്റിലെ performance ഒബ്ജക്റ്റ് വഴിയാണ് റിസോഴ്സ് ടൈമിംഗ് എപിഐ ആക്സസ് ചെയ്യുന്നത്:

            const resourceTimingEntries = performance.getEntriesByType("resource");

resourceTimingEntries.forEach(entry => {
  console.log(entry.name, entry.duration);
});

            

              
                Copy
              
            
          

ഈ കോഡ് സ്നിപ്പെറ്റ് എല്ലാ റിസോഴ്സ് ടൈമിംഗ് എൻട്രികളും ലഭ്യമാക്കുകയും ഓരോ റിസോഴ്സിന്റെയും പേരും സമയദൈർഘ്യവും കൺസോളിലേക്ക് ലോഗ് ചെയ്യുകയും ചെയ്യുന്നു. സുരക്ഷാ കാരണങ്ങളാൽ, ബ്രൗസറുകൾ റിസോഴ്സ് ടൈമിംഗ് എപിഐ നൽകുന്ന വിശദാംശങ്ങളുടെ അളവ് പരിമിതപ്പെടുത്തിയേക്കാം. ഇത് സാധാരണയായി timingAllowOrigin ഹെഡർ ഉപയോഗിച്ച് നിയന്ത്രിക്കപ്പെടുന്നു, ഇത് ക്രോസ്-ഒറിജിൻ റിസോഴ്സുകളെ അവയുടെ സമയ വിവരങ്ങൾ വെളിപ്പെടുത്താൻ അനുവദിക്കുന്നു.

റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ സമാഹരിക്കൽ

റോ റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ ഉപയോഗപ്രദമാണ്, എന്നാൽ പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ചകൾ നേടുന്നതിന്, അത് സമാഹരിക്കുകയും വിശകലനം ചെയ്യുകയും വേണം. ട്രെൻഡുകളും പാറ്റേണുകളും തിരിച്ചറിയുന്നതിനായി ഡാറ്റ ഗ്രൂപ്പുചെയ്യുന്നതും സംഗ്രഹിക്കുന്നതും സമാഹരണത്തിൽ ഉൾപ്പെടുന്നു. ഇത് പല തരത്തിൽ ചെയ്യാൻ കഴിയും:

റിസോഴ്സ് തരം അനുസരിച്ച്

വിഭവങ്ങളെ തരം അനുസരിച്ച് (ഉദാഹരണത്തിന്, ചിത്രങ്ങൾ, സ്ക്രിപ്റ്റുകൾ, സ്റ്റൈൽഷീറ്റുകൾ) ഗ്രൂപ്പുചെയ്യുന്നത് ഓരോ വിഭാഗത്തിനുമുള്ള ശരാശരി ലോഡ് സമയം താരതമ്യം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ചിലതരം വിഭവങ്ങൾ മറ്റുള്ളവയേക്കാൾ സ്ഥിരമായി വേഗത കുറഞ്ഞതാണോ എന്ന് ഇത് വെളിപ്പെടുത്താൻ കഴിയും.

            const resourceTypes = {};

resourceTimingEntries.forEach(entry => {
  const initiatorType = entry.initiatorType;
  if (!resourceTypes[initiatorType]) {
    resourceTypes[initiatorType] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceTypes[initiatorType].count++;
  resourceTypes[initiatorType].totalDuration += entry.duration;
});

for (const type in resourceTypes) {
  resourceTypes[type].averageDuration = resourceTypes[type].totalDuration / resourceTypes[type].count;
  console.log(type, resourceTypes[type].averageDuration);
}

            

              
                Copy
              
            
          

ഈ കോഡ് ഓരോ റിസോഴ്സ് തരത്തിനും ശരാശരി ലോഡ് സമയം കണക്കാക്കുകയും അത് കൺസോളിലേക്ക് ലോഗ് ചെയ്യുകയും ചെയ്യുന്നു. ഉദാഹരണത്തിന്, സ്ക്രിപ്റ്റുകളേക്കാൾ ചിത്രങ്ങൾക്ക് ഗണ്യമായി ഉയർന്ന ശരാശരി ലോഡ് സമയം ഉണ്ടെന്ന് നിങ്ങൾ കണ്ടെത്തിയേക്കാം, ഇത് ഇമേജ് ഒപ്റ്റിമൈസേഷന്റെ ആവശ്യകതയെ സൂചിപ്പിക്കുന്നു.

ഡൊമെയ്ൻ അനുസരിച്ച്

ഡൊമെയ്ൻ അനുസരിച്ച് വിഭവങ്ങളെ ഗ്രൂപ്പുചെയ്യുന്നത് വ്യത്യസ്ത കണ്ടന്റ് ഡെലിവറി നെറ്റ്‌വർക്കുകളുടെ (CDNs) അല്ലെങ്കിൽ മൂന്നാം കക്ഷി സേവനങ്ങളുടെ പ്രകടനം വിലയിരുത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു. വേഗത കുറഞ്ഞ ഡൊമെയ്‌നുകൾ തിരിച്ചറിയാനും ബദൽ ദാതാക്കളെ പരിഗണിക്കാനും ഇത് നിങ്ങളെ സഹായിക്കും.

            const resourceDomains = {};

resourceTimingEntries.forEach(entry => {
  const domain = new URL(entry.name).hostname;
  if (!resourceDomains[domain]) {
    resourceDomains[domain] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceDomains[domain].count++;
  resourceDomains[domain].totalDuration += entry.duration;
});

for (const domain in resourceDomains) {
  resourceDomains[domain].averageDuration = resourceDomains[domain].totalDuration / resourceDomains[domain].count;
  console.log(domain, resourceDomains[domain].averageDuration);
}

            

              
                Copy
              
            
          

ഈ കോഡ് ഓരോ ഡൊമെയ്‌നിനും ശരാശരി ലോഡ് സമയം കണക്കാക്കുകയും അത് കൺസോളിലേക്ക് ലോഗ് ചെയ്യുകയും ചെയ്യുന്നു. ഒരു പ്രത്യേക CDN സ്ഥിരമായി വേഗത കുറഞ്ഞതാണെന്ന് നിങ്ങൾ ശ്രദ്ധയിൽപ്പെട്ടാൽ, നിങ്ങൾ അതിന്റെ പ്രകടനം അന്വേഷിക്കുകയോ അല്ലെങ്കിൽ മറ്റൊരു ദാതാവിലേക്ക് മാറുകയോ ചെയ്യേണ്ടി വന്നേക്കാം. ഉദാഹരണത്തിന്, നിങ്ങൾ Cloudflare-ഉം Akamai-യും ഉപയോഗിക്കുന്ന ഒരു സാഹചര്യം പരിഗണിക്കുക. ഈ സമാഹരണം നിങ്ങളുടെ പ്രത്യേക സാഹചര്യത്തിൽ അവയുടെ പ്രകടനം നേരിട്ട് താരതമ്യം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കും.

പേജ് അനുസരിച്ച്

പേജ് (അല്ലെങ്കിൽ റൂട്ട്) അനുസരിച്ച് ഡാറ്റ സമാഹരിക്കുന്നത് മോശം പ്രകടനമുള്ള പേജുകൾ തിരിച്ചറിയാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് ഒപ്റ്റിമൈസേഷൻ ശ്രമങ്ങൾക്ക് മുൻഗണന നൽകാനും ഉപയോക്തൃ അനുഭവത്തിൽ ഏറ്റവും കൂടുതൽ സ്വാധീനം ചെലുത്തുന്ന പേജുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാനും നിങ്ങളെ സഹായിക്കും.

ഇതിന് നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ റൂട്ടിംഗ് സിസ്റ്റവുമായി സംയോജനം ആവശ്യമാണ്. ഓരോ റിസോഴ്സ് ടൈമിംഗ് എൻട്രിയും നിലവിലെ പേജ് URL അല്ലെങ്കിൽ റൂട്ടുമായി ബന്ധിപ്പിക്കേണ്ടതുണ്ട്. നിങ്ങൾ ഉപയോഗിക്കുന്ന ഫ്രെയിംവർക്കിനെ (ഉദാഹരണത്തിന്, React, Angular, Vue.js) ആശ്രയിച്ച് നടപ്പാക്കൽ വ്യത്യാസപ്പെടും.

കസ്റ്റം മെട്രിക്കുകൾ ഉണ്ടാക്കുന്നു

റിസോഴ്സ് ടൈമിംഗ് എപിഐ നൽകുന്ന സ്റ്റാൻഡേർഡ് മെട്രിക്കുകൾക്ക് പുറമെ, നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനത്തിന്റെ നിർദ്ദിഷ്ട വശങ്ങൾ ട്രാക്കുചെയ്യുന്നതിന് നിങ്ങൾക്ക് കസ്റ്റം മെട്രിക്കുകൾ സൃഷ്ടിക്കാൻ കഴിയും. ഉദാഹരണത്തിന്, ഒരു പ്രത്യേക ഘടകം ലോഡ് ചെയ്യാനോ ഒരു പ്രത്യേക ഘടകം റെൻഡർ ചെയ്യാനോ എടുക്കുന്ന സമയം അളക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം.

ഇത് performance.mark(), performance.measure() രീതികൾ ഉപയോഗിച്ച് നേടാനാകും:

            performance.mark('component-start');

// Load the component

performance.mark('component-end');

performance.measure('component-load', 'component-start', 'component-end');

const componentLoadTime = performance.getEntriesByName('component-load')[0].duration;

console.log('Component load time:', componentLoadTime);

            

              
                Copy
              
            
          

ഈ കോഡ് സ്നിപ്പെറ്റ് ഒരു ഘടകം ലോഡ് ചെയ്യാൻ എടുക്കുന്ന സമയം അളക്കുകയും അത് കൺസോളിലേക്ക് ലോഗ് ചെയ്യുകയും ചെയ്യുന്നു. തുടർന്ന് നിങ്ങൾക്ക് ഈ കസ്റ്റം മെട്രിക്കുകൾ സ്റ്റാൻഡേർഡ് റിസോഴ്സ് ടൈമിംഗ് എപിഐ മെട്രിക്കുകളുടെ അതേ രീതിയിൽ സമാഹരിക്കാൻ കഴിയും.

പ്രകടന ഉൾക്കാഴ്ചകൾക്കായി റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ വിശകലനം ചെയ്യൽ

നിങ്ങൾ റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ സമാഹരിച്ചുകഴിഞ്ഞാൽ, പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനുള്ള നിർദ്ദിഷ്ട മേഖലകൾ തിരിച്ചറിയാൻ നിങ്ങൾക്ക് അത് ഉപയോഗിക്കാം. ചില സാധാരണ സാഹചര്യങ്ങളും സാധ്യമായ പരിഹാരങ്ങളും താഴെ നൽകുന്നു:

ദൈർഘ്യമേറിയ DNS ലുക്കപ്പ് സമയം

• കാരണം: വേഗത കുറഞ്ഞ DNS സെർവർ, വിദൂര DNS സെർവർ, അപൂർവ്വമായ DNS ലുക്കപ്പുകൾ.
• പരിഹാരം: വേഗതയേറിയ DNS ദാതാവിലേക്ക് മാറുക (ഉദാഹരണത്തിന്, Cloudflare, Google Public DNS), ഉപയോക്താക്കൾക്ക് അടുത്തേക്ക് DNS റെക്കോർഡുകൾ കാഷെ ചെയ്യാൻ ഒരു CDN ഉപയോഗിക്കുക, DNS പ്രീഫെച്ചിംഗ് നടപ്പിലാക്കുക.
• ഉദാഹരണം: ആഗോളതലത്തിൽ ഉപയോക്താക്കളെ ലക്ഷ്യമിടുന്ന ഒരു വെബ്സൈറ്റിന് ചില പ്രദേശങ്ങളിൽ വേഗത കുറഞ്ഞ ലോഡ് സമയം അനുഭവപ്പെട്ടു. റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റയുടെ വിശകലനം ആ പ്രദേശങ്ങളിൽ ദൈർഘ്യമേറിയ DNS ലുക്കപ്പ് സമയം വെളിപ്പെടുത്തി. ആഗോള DNS സെർവറുകളുള്ള ഒരു CDN-ലേക്ക് മാറിയത് DNS ലുക്കപ്പ് സമയം ഗണ്യമായി കുറയ്ക്കുകയും മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്തു.

വേഗത കുറഞ്ഞ കണക്ഷൻ സമയം

• കാരണം: നെറ്റ്‌വർക്ക് തിരക്ക്, സെർവർ-സൈഡ് പ്രശ്നങ്ങൾ, ഫയർവാൾ ഇടപെടൽ.
• പരിഹാരം: സെർവർ ഇൻഫ്രാസ്ട്രക്ചർ ഒപ്റ്റിമൈസ് ചെയ്യുക, ഉപയോക്താക്കൾക്ക് അടുത്തേക്ക് ഉള്ളടക്കം വിതരണം ചെയ്യാൻ ഒരു CDN ഉപയോഗിക്കുക, കാര്യക്ഷമമായ ആശയവിനിമയം അനുവദിക്കുന്നതിന് ഫയർവാളുകൾ കോൺഫിഗർ ചെയ്യുക.
• ഉദാഹരണം: ഒരു ഇ-കൊമേഴ്സ് വെബ്സൈറ്റിന് തിരക്കേറിയ ഷോപ്പിംഗ് സമയങ്ങളിൽ വേഗത കുറഞ്ഞ കണക്ഷൻ സമയം അനുഭവപ്പെട്ടു. റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റയുടെ വിശകലനം സെർവർ ഓവർലോഡാണ് പ്രധാന കാരണമെന്ന് ചൂണ്ടിക്കാട്ടി. സെർവർ ഹാർഡ്‌വെയർ നവീകരിക്കുന്നതും ഡാറ്റാബേസ് ചോദ്യങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതും കണക്ഷൻ സമയം മെച്ചപ്പെടുത്തുകയും തിരക്കേറിയ സമയങ്ങളിൽ പ്രകടന തകർച്ച തടയുകയും ചെയ്തു.

വലിയ ട്രാൻസ്ഫർ വലുപ്പങ്ങൾ

• കാരണം: ഒപ്റ്റിമൈസ് ചെയ്യാത്ത ചിത്രങ്ങൾ, മിനിഫൈ ചെയ്യാത്ത കോഡ്, അനാവശ്യ അസറ്റുകൾ.
• പരിഹാരം: ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക (ഉദാഹരണത്തിന്, കംപ്രസ് ചെയ്യുക, വലുപ്പം മാറ്റുക, WebP പോലുള്ള ആധുനിക ഫോർമാറ്റുകൾ ഉപയോഗിക്കുക), JavaScript, CSS കോഡ് മിനിഫൈ ചെയ്യുക, ഉപയോഗിക്കാത്ത കോഡും അസറ്റുകളും നീക്കം ചെയ്യുക, GZIP അല്ലെങ്കിൽ Brotli കംപ്രഷൻ പ്രവർത്തനക്ഷമമാക്കുക.
• ഉദാഹരണം: ഒരു വാർത്താ വെബ്സൈറ്റ് വലിയ, ഒപ്റ്റിമൈസ് ചെയ്യാത്ത ചിത്രങ്ങൾ ഉപയോഗിച്ചു, ഇത് പേജ് ലോഡ് സമയം ഗണ്യമായി വർദ്ധിപ്പിച്ചു. ImageOptim പോലുള്ള ടൂളുകൾ ഉപയോഗിച്ച് ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതും ലേസി ലോഡിംഗ് നടപ്പിലാക്കുന്നതും ഇമേജ് ട്രാൻസ്ഫർ വലുപ്പങ്ങൾ കുറയ്ക്കുകയും പേജ് ലോഡ് പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്തു.
• അന്താരാഷ്ട്രവൽക്കരണ പരിഗണന: വിവിധ പ്രദേശങ്ങളിൽ സാധാരണമായ വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളും റെസല്യൂഷനുകളും ഇമേജ് ഒപ്റ്റിമൈസേഷൻ പരിഗണിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക.

വേഗത കുറഞ്ഞ സെർവർ റെസ്പോൺസ് സമയം

• കാരണം: കാര്യക്ഷമമല്ലാത്ത സെർവർ-സൈഡ് കോഡ്, ഡാറ്റാബേസ് തടസ്സങ്ങൾ, നെറ്റ്‌വർക്ക് ലേറ്റൻസി.
• പരിഹാരം: സെർവർ-സൈഡ് കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുക, ഡാറ്റാബേസ് പ്രകടനം മെച്ചപ്പെടുത്തുക, ഉപയോക്താക്കൾക്ക് അടുത്തേക്ക് ഉള്ളടക്കം കാഷെ ചെയ്യാൻ ഒരു CDN ഉപയോഗിക്കുക, HTTP കാഷിംഗ് നടപ്പിലാക്കുക.
• ഉദാഹരണം: ഒരു സോഷ്യൽ മീഡിയ പ്ലാറ്റ്‌ഫോമിന് കാര്യക്ഷമമല്ലാത്ത ഡാറ്റാബേസ് ചോദ്യങ്ങൾ കാരണം വേഗത കുറഞ്ഞ സെർവർ റെസ്പോൺസ് സമയം അനുഭവപ്പെട്ടു. ഡാറ്റാബേസ് ചോദ്യങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതും കാഷിംഗ് മെക്കാനിസങ്ങൾ നടപ്പിലാക്കുന്നതും സെർവർ റെസ്പോൺസ് സമയം ഗണ്യമായി കുറയ്ക്കുകയും മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്തു.

റെൻഡർ-ബ്ലോക്കിംഗ് റിസോഴ്സുകൾ

• കാരണം: പേജിന്റെ റെൻഡറിംഗ് തടയുന്ന സിൻക്രണസ് JavaScript, CSS.
• പരിഹാരം: പ്രാധാന്യമില്ലാത്ത JavaScript-ന്റെ ലോഡിംഗ് മാറ്റിവയ്ക്കുക, പ്രധാനപ്പെട്ട CSS ഇൻലൈൻ ചെയ്യുക, സ്ക്രിപ്റ്റുകൾക്കായി അസിൻക്രണസ് ലോഡിംഗ് ഉപയോഗിക്കുക, ഉപയോഗിക്കാത്ത CSS ഒഴിവാക്കുക.
• ഉദാഹരണം: ഒരു ബ്ലോഗ് വെബ്സൈറ്റ് ഒരു വലിയ, റെൻഡർ-ബ്ലോക്കിംഗ് CSS ഫയൽ ഉപയോഗിച്ചു, ഇത് പേജിന്റെ പ്രാരംഭ റെൻഡറിംഗ് വൈകിപ്പിച്ചു. പ്രധാനപ്പെട്ട CSS ഇൻലൈൻ ചെയ്യുന്നതും പ്രാധാന്യമില്ലാത്ത CSS-ന്റെ ലോഡിംഗ് മാറ്റിവയ്ക്കുന്നതും വെബ്സൈറ്റിന്റെ പ്രകടനം മെച്ചപ്പെടുത്തി.

പെർഫോമൻസ് മോണിറ്ററിംഗ് ടൂളുകളിലേക്ക് റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ സംയോജിപ്പിക്കുന്നു

റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ സ്വമേധയാ ശേഖരിക്കുന്നതും വിശകലനം ചെയ്യുന്നതും സമയമെടുക്കുന്ന ഒന്നാണ്. ഭാഗ്യവശാൽ, നിരവധി പെർഫോമൻസ് മോണിറ്ററിംഗ് ടൂളുകൾക്ക് ഈ പ്രക്രിയ ഓട്ടോമേറ്റ് ചെയ്യാനും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനത്തെക്കുറിച്ച് തത്സമയ ഉൾക്കാഴ്ചകൾ നൽകാനും കഴിയും. ഈ ടൂളുകൾ സാധാരണയായി പശ്ചാത്തലത്തിൽ റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ ശേഖരിക്കുകയും അത് ഉപയോക്തൃ-സൗഹൃദ ഡാഷ്‌ബോർഡിൽ അവതരിപ്പിക്കുകയും ചെയ്യുന്നു.

റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റയെ പിന്തുണയ്ക്കുന്ന പ്രശസ്തമായ പെർഫോമൻസ് മോണിറ്ററിംഗ് ടൂളുകളിൽ ഇവ ഉൾപ്പെടുന്നു:

• Google PageSpeed Insights: റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ ഉൾപ്പെടെ വിവിധ പ്രകടന മെട്രിക്കുകളെ അടിസ്ഥാനമാക്കി പേജ് വേഗത മെച്ചപ്പെടുത്തുന്നതിനുള്ള ശുപാർശകൾ നൽകുന്നു.
• WebPageTest: വ്യത്യസ്ത ലൊക്കേഷനുകളിൽ നിന്നും ബ്രൗസറുകളിൽ നിന്നും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനം പരീക്ഷിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, വിശദമായ റിസോഴ്സ് ടൈമിംഗ് വിവരങ്ങൾ നൽകുന്നു.
• New Relic: തത്സമയ റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റയും വിഷ്വലൈസേഷനുകളും ഉൾപ്പെടെ സമഗ്രമായ പ്രകടന നിരീക്ഷണ കഴിവുകൾ വാഗ്ദാനം ചെയ്യുന്നു.
• Datadog: വിശാലമായ ഇൻഫ്രാസ്ട്രക്ചർ, ആപ്ലിക്കേഷൻ നിരീക്ഷണത്തോടൊപ്പം വിശദമായ റിസോഴ്സ് ടൈമിംഗ് മെട്രിക്കുകൾ നൽകുന്നു, പ്രകടനത്തിന്റെ സമഗ്രമായ കാഴ്ച വാഗ്ദാനം ചെയ്യുന്നു.
• Sentry: പ്രാഥമികമായി എറർ ട്രാക്കിംഗിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു, നിർദ്ദിഷ്ട പിശകുകളുമായി പ്രകടന പ്രശ്നങ്ങൾ പരസ്പരം ബന്ധിപ്പിക്കുന്നതിന് റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ ഉൾപ്പെടെയുള്ള പ്രകടന നിരീക്ഷണ സവിശേഷതകളും സെൻട്രി നൽകുന്നു.
• Lighthouse: വെബ് പേജുകളുടെ ഗുണനിലവാരം മെച്ചപ്പെടുത്തുന്നതിനുള്ള ഒരു ഓപ്പൺ സോഴ്‌സ്, ഓട്ടോമേറ്റഡ് ടൂൾ. പ്രകടനം, പ്രവേശനക്ഷമത, പ്രോഗ്രസീവ് വെബ് ആപ്പുകൾ, എസ്ഇഒ എന്നിവയ്‌ക്കും അതിലേറെ കാര്യങ്ങൾക്കുമായി ഇതിന് ഓഡിറ്റുകളുണ്ട്. Chrome DevTools-ൽ നിന്നോ, കമാൻഡ് ലൈനിൽ നിന്നോ, അല്ലെങ്കിൽ ഒരു നോഡ് മൊഡ്യൂളായോ പ്രവർത്തിപ്പിക്കാം.

ഈ ടൂളുകളിലേക്ക് റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ സംയോജിപ്പിക്കുന്നതിലൂടെ, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനത്തെക്കുറിച്ച് ആഴത്തിലുള്ള ധാരണ നേടാനും മെച്ചപ്പെടുത്താനുള്ള മേഖലകൾ കൂടുതൽ ഫലപ്രദമായി തിരിച്ചറിയാനും കഴിയും.

ധാർമ്മിക പരിഗണനകളും ഉപയോക്തൃ സ്വകാര്യതയും

റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ ശേഖരിക്കുകയും വിശകലനം ചെയ്യുകയും ചെയ്യുമ്പോൾ, ധാർമ്മിക പ്രത്യാഘാതങ്ങളും ഉപയോക്തൃ സ്വകാര്യതയും പരിഗണിക്കേണ്ടത് നിർണായകമാണ്. നിങ്ങൾ ശേഖരിക്കുന്ന ഡാറ്റയെക്കുറിച്ചും അത് എങ്ങനെ ഉപയോഗിക്കുന്നുവെന്നതിനെക്കുറിച്ചും ഉപയോക്താക്കളോട് സുതാര്യത പുലർത്തുക. GDPR, CCPA പോലുള്ള പ്രസക്തമായ സ്വകാര്യതാ നിയന്ത്രണങ്ങൾ നിങ്ങൾ പാലിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.

വ്യക്തിപരമായി തിരിച്ചറിയാൻ കഴിയുന്ന വിവരങ്ങൾ (PII) ശേഖരിക്കുന്നത് ഒഴിവാക്കുക, സാധ്യമാകുന്നിടത്തെല്ലാം ഡാറ്റ അജ്ഞാതമാക്കുകയോ അല്ലെങ്കിൽ വ്യാജനാമകരണം ചെയ്യുകയോ ചെയ്യുക. അനധികൃത ആക്‌സസ്സിൽ നിന്നോ വെളിപ്പെടുത്തലിൽ നിന്നോ ഡാറ്റയെ പരിരക്ഷിക്കുന്നതിന് ഉചിതമായ സുരക്ഷാ നടപടികൾ നടപ്പിലാക്കുക. ഉപയോക്താക്കൾക്ക് പ്രകടന നിരീക്ഷണത്തിൽ നിന്ന് ഒഴിവാകാനുള്ള ഓപ്ഷൻ നൽകുന്നത് പരിഗണിക്കുക.

അഡ്വാൻസ്ഡ് ടെക്നിക്കുകളും ഭാവിയിലെ പ്രവണതകളും

റിസോഴ്സ് ടൈമിംഗ് എപിഐ നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുന്നു, ഫ്രണ്ടെൻഡ് പ്രകടന വിശകലനം കൂടുതൽ മെച്ചപ്പെടുത്തുന്നതിനായി പുതിയ സവിശേഷതകളും സാങ്കേതികതകളും ഉയർന്നുവരുന്നു. ശ്രദ്ധിക്കേണ്ട ചില നൂതന സാങ്കേതികതകളും ഭാവിയിലെ പ്രവണതകളും താഴെ നൽകുന്നു:

സെർവർ ടൈമിംഗ് എപിഐ

ഒരു അഭ്യർത്ഥനയുടെ പ്രോസസ്സിംഗ് സമയത്തെക്കുറിച്ചുള്ള സമയ വിവരങ്ങൾ വെളിപ്പെടുത്താൻ സെർവർ ടൈമിംഗ് എപിഐ സെർവറുകളെ അനുവദിക്കുന്നു. എൻഡ്-ടു-എൻഡ് പ്രകടനത്തിന്റെ കൂടുതൽ പൂർണ്ണമായ ചിത്രം നൽകുന്നതിന് ഈ വിവരങ്ങൾ റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റയുമായി സംയോജിപ്പിക്കാൻ കഴിയും.

ലോംഗ് ടാസ്ക്സ് എപിഐ

ലോംഗ് ടാസ്ക്സ് എപിഐ പ്രധാന ത്രെഡിനെ ദീർഘനേരം തടയുന്ന ടാസ്ക്കുകൾ തിരിച്ചറിയുന്നു, ഇത് UI ജാങ്കിനും പ്രതികരണശേഷി പ്രശ്നങ്ങൾക്കും കാരണമാകുന്നു. ഈ വിവരങ്ങൾ JavaScript കോഡ് ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിനും ഉപയോഗിക്കാം.

വെബ്അസംബ്ലി (Wasm)

വെബ്അസംബ്ലി എന്നത് വെർച്വൽ മെഷീനുകൾക്കായുള്ള ഒരു ബൈനറി ഇൻസ്ട്രക്ഷൻ ഫോർമാറ്റാണ്, ഇത് ബ്രൗസറിൽ തനതായ പ്രകടനം നൽകുന്നു. പ്രകടനം-നിർണ്ണായകമായ ജോലികൾക്കായി Wasm ഉപയോഗിക്കുന്നത് ലോഡ് സമയവും മൊത്തത്തിലുള്ള പ്രകടനവും ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും.

HTTP/3

HTTP/3 എന്നത് HTTP പ്രോട്ടോക്കോളിന്റെ ഏറ്റവും പുതിയ പതിപ്പാണ്, ഇത് മെച്ചപ്പെട്ട പ്രകടനവും വിശ്വാസ്യതയും നൽകുന്നതിന് QUIC ട്രാൻസ്പോർട്ട് പ്രോട്ടോക്കോൾ ഉപയോഗിക്കുന്നു. HTTP/3, HTTP/2-നെ അപേക്ഷിച്ച് കുറഞ്ഞ ലേറ്റൻസിയും മെച്ചപ്പെട്ട കണക്ഷൻ മാനേജ്മെന്റും ഉൾപ്പെടെ നിരവധി ഗുണങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു.

ഉപസംഹാരം

ഫ്രണ്ടെൻഡ് പ്രകടനം മനസ്സിലാക്കുന്നതിനും ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുമുള്ള ശക്തമായ ഒരു ഉപകരണമാണ് റിസോഴ്സ് ടൈമിംഗ് എപിഐ. റിസോഴ്സ് ടൈമിംഗ് ഡാറ്റ സമാഹരിക്കുകയും വിശകലനം ചെയ്യുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് തടസ്സങ്ങൾ തിരിച്ചറിയാനും ലോഡ് സമയം മെച്ചപ്പെടുത്താനും മികച്ച ഉപയോക്തൃ അനുഭവം നൽകാനും കഴിയും. നിങ്ങൾ ഒരു പരിചയസമ്പന്നനായ ഫ്രണ്ടെൻഡ് ഡെവലപ്പർ ആണെങ്കിലും അല്ലെങ്കിൽ ഇപ്പോൾ തുടങ്ങുന്ന ആളാണെങ്കിലും, ഉയർന്ന പ്രകടനമുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് റിസോഴ്സ് ടൈമിംഗ് എപിഐയിൽ പ്രാവീണ്യം നേടേണ്ടത് അത്യാവശ്യമാണ്. ഡാറ്റാധിഷ്ഠിത ഒപ്റ്റിമൈസേഷന്റെ ശക്തി സ്വീകരിക്കുകയും നിങ്ങളുടെ വെബ്സൈറ്റിന്റെയോ ആപ്ലിക്കേഷന്റെയോ പൂർണ്ണമായ സാധ്യതകൾ അൺലോക്ക് ചെയ്യുകയും ചെയ്യുക. പ്രകടന ഡാറ്റ ശേഖരിക്കുകയും വിശകലനം ചെയ്യുകയും ചെയ്യുമ്പോൾ ഉപയോക്തൃ സ്വകാര്യതയ്ക്കും ധാർമ്മിക പരിഗണനകൾക്കും മുൻഗണന നൽകാൻ ഓർക്കുക. ഏറ്റവും പുതിയ ട്രെൻഡുകളെയും സാങ്കേതികതകളെയും കുറിച്ച് അറിഞ്ഞിരിക്കുന്നതിലൂടെ, നിങ്ങളുടെ വെബ്സൈറ്റ് വരും വർഷങ്ങളിൽ വേഗതയേറിയതും പ്രതികരണശേഷിയുള്ളതും ഉപയോക്തൃ-സൗഹൃദവുമായി തുടരുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾക്ക് കഴിയും. ഈ സാങ്കേതികതകളും ഉപകരണങ്ങളും പ്രയോജനപ്പെടുത്തുന്നത് കൂടുതൽ പ്രകടനക്ഷമവും ആഗോളതലത്തിൽ ആക്സസ് ചെയ്യാവുന്നതുമായ വെബിന് സംഭാവന നൽകും.

പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ച: റിസോഴ്സ് തരം, ഡൊമെയ്ൻ എന്നിവ അനുസരിച്ച് അടിസ്ഥാന റിസോഴ്സ് ടൈമിംഗ് സമാഹരണം നടപ്പിലാക്കി ആരംഭിക്കുക. ഇത് നിങ്ങളുടെ പ്രകടന തടസ്സങ്ങൾ എവിടെയാണെന്ന് ഉടനടി ഉൾക്കാഴ്ചകൾ നൽകുന്നു. തുടർന്ന്, ഡാറ്റാ ശേഖരണവും വിശകലനവും ഓട്ടോമേറ്റ് ചെയ്യുന്നതിന് Google PageSpeed Insights അല്ലെങ്കിൽ WebPageTest പോലുള്ള ഒരു പെർഫോമൻസ് മോണിറ്ററിംഗ് ടൂളുമായി സംയോജിപ്പിക്കുക.